<template>
	<view class="search">
		<new-line/>
	
			<view class="search-item">
				<view class="search-title">
				<view class="f-color">最近搜索</view>
				<view class="iconfont" @tap="clearRecord()">&#xe600;</view>
				</view>
				<view class="search-text" v-if="searchData.length > 0">
					<view class="search-name f-color" v-for="(item,index) in searchData" :key='index' @tap="toSearch(item)">{{item}}</view>
				</view>
				
				<view v-else class="end">最近没有搜索记录</view>
				
			</view>
			
			
			
			<view class="search-item">
				<view class="search-title">
				<view class="f-color">热门搜索</view>
				<view class="iconfont"></view>
				</view>
				<view class="search-text">
					<view class="search-name f-color">四件套</view>
					<view class="search-name f-color">面膜</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	import newLine from "@/component/line.vue"
	export default {
		data() {
			return {
				keyText:'',
				searchData:[]
			}
		},
		
		onLoad() {
			uni.getStorage({
				key:'searchData',
				success: (res) => {
					this.searchData = JSON.parse(res.data)
				}
			})
		},
		
		onNavigationBarButtonTap(e){
            this.search()
		},
		
		onNavigationBarSearchInputChanged(e){
			this.keyText = e.text;

		},
		
		onNavigationBarSearchInputConfirmed(){
			this.search()
		},
		
		methods: {
			// 判读搜索框是否为空和控制跳转页面
           search(){
			   if(this.keyText ===''){
				   return uni.showToast({
					   	title:"请输入要搜索的东西",
						icon:"none"
					   })
			   }else{
				 this.toSearch(this.keyText)

			   }
			   uni.hideKeyboard();
			   this.addSearch();
			   
		   },
		   
		   addSearch(){

			   // 判断记录词是否重复
			   let index =this.searchData.indexOf( this.keyText);
			   
			   if( index < 0){
				   this.searchData.unshift( this.keyText ) 
			   }else{
				  
				this.searchData.unshift( this.searchData.splice(index,1)[0] );                  
			   }
			   
			   uni.setStorage({
				   key:'searchData',
				   data:JSON.stringify(this.searchData)   
			   })
			   
			   

		   },
		   
		   clearRecord(){
			   uni.showModal({
			   	title:'重要提示',
				content:'是否清除记录',
				cancelText:'取消',
				confirmText:'清除',
				success: (res) => {
					if(res.confirm){
						uni.removeStorage({
							key:'searchData'
						})
						this.searchData=[]
					}
				}
				
				
			   })
		   },
		   
		   toSearch(item){
			   uni.navigateTo({
			   	url:'/pages/search/searchList?keyText='+item+''
			   })
		   }
		   
		},
		components:{
			newLine
		},
		
	}
</script>

<style scoped>

     .search-item{
		 padding: 20rpx;
	 }
	 
	 .search-title{
		 display:flex;
		 justify-content: space-between;
		 
	 }
	 
	 .search-name{
		 padding: 4rpx 24rpx;
		 background-color: #e3e5e7;
		 display: inline-block;
		 border-radius: 25rpx;
		 margin: 10rpx;
	 }
	 
	 .end{
		 text-align: center;
	 }

</style>
